<template>
  <div v-if="opentype">
    <div class="shoucan">
      <el-dialog
        v-model="dialogVisible"
        width="480px"
        style="border-radius: 20px"
        :before-close="handleClose"
      >
        <div class="shoucaniten f-d-c">
          <div class="title">
            {{ bianjiCheck ? "编辑收藏夹" : "创建收藏夹" }}
          </div>
          <div class="name f-d-c">
            <span>名称</span>
            <input type="text" placeholder="请输入收藏夹名称" v-model="name" />
          </div>
          <!-- <div class="name f-d-c">
            <span>简介</span>
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              v-model="content"
              placeholder="这人很懒什么也没写~"
            >
            </textarea>
          </div> -->
          <div class="name f-d-c">
            <span>状态</span>
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio label="1" size="large">对所有人可见</el-radio>
              <el-radio label="2" size="large">设为私密</el-radio>
            </el-radio-group>
          </div>
          <div class="buttonlist f-a-c">
            <div class="quxiao f-j-a-c click" @click="handleClose">
              <span>取消</span>
            </div>
            <div class="queren f-j-a-c click" @click="addcollectCreate">
              <span>确认</span>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="addshoucan shoucan">
      <el-dialog
        v-model="adddialogVisible"
        width="480px"
        style="border-radius: 20px"
        :before-close="handleClose"
      >
        <div class="shoucaniten f-d-c">
          <div class="title">添加到收藏夹</div>
          <div class="name f-d-c" style="margin-bottom: 10px">
            <span>名称</span>
            <el-select
              v-model="value"
              class="m-2"
              placeholder="请选择收藏夹"
              size="large"
              @change="changeid"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.collectName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="addshoucan f-a-c click" @click="addshoucan">
            <svg-icon name="icon-tianjiasc"></svg-icon>
            <span>创建新收藏夹</span>
          </div>
          <div class="buttonlist f-a-c">
            <div class="quxiao f-j-a-c click" @click="handleClose">
              <span>取消</span>
            </div>
            <div class="queren f-j-a-c click" @click="getadditemCollect">
              <span>确认</span>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addcollect,
  collectlist,
  additemCollect,
  updateCollect,
  deleteCollect,
} from "@/axios/api.js";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";

import { useStore } from "vuex";
import { emit } from "process";
export default defineComponent({
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    adddialogVisible: {
      type: Boolean,
      default: false,
    },
    opentype: {
      type: Boolean,
      default: false,
    },
    shoucanID: {
      type: [String, Number],
      default: 0,
    },
    googlistitem: {
      type: [String, Number],
      default: 0,
    },
    bianjiCheck: {
      type: Boolean,
      default: false,
    },
    bianjiitem: {
      type: Object,
      default: {},
    },
    quxiaoCheck: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      value: "",
      options: [],
      adddialogVisible: false, // 添加收藏夹
      radio1: "",
      content: "", //简介
      name: "", //收藏夹名称
      dialogVisible: false, // 收藏夹开关
      changID: 0,
      id: 0,
      phone: "",
      types: "",
    });
    watch(
      () => props.opentype,
      (newVal, oldVal) => {
        if (props.bianjiCheck == true) {
          data.dialogVisible = true;
          console.log(props.bianjiitem[0]);
          data.name = props.bianjiitem[0].collectName;
          data.content = props.bianjiitem[0].detail;
          data.id = props.bianjiitem[0].id;
        } else if (props.quxiaoCheck) {
        } else {
          getcollectlist();
        }
      }
    );

    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    onMounted(() => {
      data.phone = router.currentRoute._value.query.phone;
      data.types = router.currentRoute._value.query.id;
      // console.log(data.phone);
    });
    onUnmounted(() => {});
    // 取消收藏
    let getdeleteCollect = (value) => {
      deleteCollect({ modelId: value })
        .then((res) => {
          opentypeget();
          handleClose();
          ElMessage.success("取消成功");
          let modelIddata = {};
          modelIddata.modelId = value;
          modelIddata.type = 0;
          emit("successcollct", modelIddata);
        })
        .catch((err) => {
          opentypeget();
          handleClose();
          ElMessage.warning(err.message);
        });
    };
    // 添加收藏
    let getadditemCollect = () => {
      //         collectId  收藏夹id
      // modelId 模型id
      additemCollect({
        collectId: data.changID,
        modelId: props.googlistitem,
      })
        .then((res) => {
          ElMessage.success("收藏成功");
          let datas = {};
          datas.modelId = props.googlistitem;
          datas.shoucanID = props.shoucanID;
        
          opentypeget();
          handleClose();
          let modelIddata = {};
          modelIddata.modelId = props.googlistitem;
          modelIddata.type = 1;
          emit("successcollct", modelIddata);
        })
        .catch((err) => {
          opentypeget();
          ElMessage.warning(err.message);
        });
    };

    let opentypeget = () => {
      emit("opentypeclick");
    };
    // 选择器
    let changeid = (e) => {
      data.changID = e;
    };
    // 列表
    let getcollectlist = () => {
      console.log(data.types);
      collectlist({
        phone: data.types == 0 ? data.phone : userInfo.value.userId || "",
      })
        .then((res) => {
          if (res.data.length) {
            data.options = res.data;
            if (!props.bianjiCheck) {
              data.adddialogVisible = true;
            }
          } else {
            data.dialogVisible = true;
          }
        })
        .catch((err) => {
          ElMessage.warning(err.message);
        });
    };
    // 更新收藏夹
    let getupdateCollect = () => {
      let datas = {};
      datas.collectName = data.name;
      datas.isShow = data.radio1 == 1 ? 0 : 1; // 0可见 1私密
      datas.detail = data.content;
      datas.id = data.id;
      updateCollect({ ...datas })
        .then((res) => {
          data.name = "";
          data.radio1 = "";
          data.content = "";
          handleClose();
          opentypeget();
          getcollectlist();
          emit("getcolletClick");

          ElMessage.success("更新成功");
        })
        .catch((err) => {
          handleClose();
          opentypeget();
          ElMessage.warning(err.message);
        });
    };
    // 增加收藏夹
    let addcollectCreate = () => {
      if (data.name == "") {
        return ElMessage.error("请填写收藏夹名称");
      }
      if (data.radio1 == "") {
        return ElMessage.error("请选择状态");
      }
      if (props.bianjiCheck) {
        getupdateCollect();
        return;
      }
      let datas = {};
      datas.collectName = data.name;
      datas.isShow = data.radio1 == 1 ? 0 : 1; // 0可见 1私密
      datas.detail = data.content;
      addcollect({ ...datas })
        .then((res) => {
          data.name = "";
          data.radio1 = "";
          data.content = "";

          ElMessage.success("创建成功");
          handleClose();
          opentypeget();
          getcollectlist();
          emit("getcolletClick");
        })
        .catch((err) => {
          opentypeget();

          ElMessage.warning(err.message);
        });
    };
    // 收藏
    let collect = () => {
      // data.dialogVisible = true;
      data.adddialogVisible = true;
    };
    let handleClose = () => {
      data.dialogVisible = false;
      data.adddialogVisible = false;
      opentypeget();
    };
    // 添加收藏夹
    let addshoucan = () => {
      data.dialogVisible = true;
      data.adddialogVisible = false;
    };
    return {
      getdeleteCollect,
      getupdateCollect,
      opentypeget,
      changeid,
      getadditemCollect,
      getcollectlist,
      userInfo,
      addcollectCreate,
      addshoucan,
      collect,
      handleClose,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.shoucan {
  .shoucaniten {
    .addshoucan {
      position: relative;
      z-index: 999;
      margin-top: 10px;
      > span {
        display: block;

        margin-left: 5px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #64c8dc;
      }
    }
    .title {
      text-align: center;
      margin-top: -33px;
      font-size: 16px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
    .name {
      margin-top: 40px;
      > span {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      > input {
        width: 100%;
        height: 46px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #ececec;
        padding: 0 20px;
      }
      > textarea {
        padding: 14px 10px;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #ececec;
        width: 100%;
        height: 100px;
        overflow: auto;
      }
      textarea:focus {
        outline: none;
      }
      /* 滚动条整体样式 */
      textarea::-webkit-scrollbar {
        width: 3px;
        height: 3px;
      }

      /* 滚动条滑块样式 */
      textarea::-webkit-scrollbar-thumb {
        background-color: #ececec;
        border-radius: 2px;
      }

      /* 滚动条轨道样式 */
      textarea::-webkit-scrollbar-track {
        background-color: #f7f9fa;
      }

      /* 鼠标悬停时滚动条轨道样式 */
      textarea::-webkit-scrollbar-track:hover {
        background-color: #f7f9fa;
      }
      textarea {
        resize: none;
      }
    }
  }
}

.buttonlist {
  justify-content: flex-end;
  .quxiao {
    width: 80px;
    height: 40px;
    background: #f3f4f5;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #656f79;
    }
  }
  .queren {
    margin-left: 10px;
    width: 80px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
  }
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #64c8dc;
  border-color: #64c8dc;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #64c8dc;
}
</style>
